import { Canvas, Story, Meta } from "@storybook/blocks";
import { Icon } from "metabase/ui";
import { Stack } from "metabase/ui";
import { NumberInput } from "./";
import * as NumberInputStories from "./NumberInput.stories";

<Meta of={NumberInputStories} />

# NumberInput

Our themed wrapper around [Mantine NumberInput](https://v6.mantine.dev/core/number-input/).

## Docs

- [Figma File](https://www.figma.com/file/YWyb541aUHtYXJVPzyYSbg/Input-%2F-Numbers?type=design&node-id=1-96&mode=design&t=1bDfUrJc5alZmVpx-0)
- [Mantine NumberInput Docs](https://v6.mantine.dev/core/number-input/)

## Examples

<Canvas of={NumberInputStories.Default} />

### Size - md

<Canvas of={NumberInputStories.EmptyMd} />

#### Filled

<Canvas of={NumberInputStories.FilledMd} />

#### Asterisk

<Canvas of={NumberInputStories.AsteriskMd} />

#### Description

<Canvas of={NumberInputStories.DescriptionMd} />

#### Disabled

<Canvas of={NumberInputStories.DisabledMd} />

#### Error

<Canvas of={NumberInputStories.ErrorMd} />

#### Icon

<Canvas of={NumberInputStories.IconMd} />

#### Read only

<Canvas of={NumberInputStories.ReadOnlyMd} />

### Size - xs

<Canvas of={NumberInputStories.EmptyXs} />

#### Filled

<Canvas of={NumberInputStories.FilledXs} />

#### Asterisk

<Canvas of={NumberInputStories.AsteriskXs} />

#### Description

<Canvas of={NumberInputStories.DescriptionXs} />

#### Disabled

<Canvas of={NumberInputStories.DisabledXs} />

#### Error

<Canvas of={NumberInputStories.ErrorXs} />

#### Icon

<Canvas of={NumberInputStories.IconXs} />

#### Read only

<Canvas of={NumberInputStories.ReadOnlyXs} />
